<template>
	<view>
		<view
			:style="{position:'fixed',height:menuObject.height + menuObject.top + top + 'px',width:'100%',top:'0',zIndex:zIndex,transition: 'background 0.3s ease-in-out'}"
			class="w-100 flex-dir-row" :class="'vague-bg-' + bacColor">
			<view class="pos-rela">
				<view class="flex-dir-row ali-item-cen ping-20-0  br-200 text-ali-c ml-15 border-f0 pos-abso"
					:style="{marginTop:menuObject.top+'px',height:menuObject.height+'px',width:menuObject.width + 'px'}">
					<view :style="{color:iconColor}" class="iconfont ic-zuo fs-38 w-50 text-ali-c" @click="GoBack()" />
					<view class="col-b1 shu-x" />
					<view :style="{color:iconColor}" class="iconfont ic-shouye fs-40 w-50 text-ali-c"
						@click="$ReLaunch('/pages/index/index')" />
				</view>
			</view>
			<view @click="$NavigateTo(path)" class="fw-600 w-100 flex-center flex-dir-row ali-item-cen"
				:style="{marginTop:menuObject.top+'px',height:menuObject.height+'px',lineHeight:menuObject.height + 'px'}">
				<qmy-gender-border v-if="imgUrl" iconBottom="2rpx" iconWidth="20rpx" iconHeight="20rpx" iconSize="16rpx"
					iconLineHeight="20rpx" :gender="userGender" :avatar="imgUrl" :avatarWidth="menuObject.height + 'px'"
					:avatarHeight="menuObject.height + 'px'"></qmy-gender-border>
				<view v-if="title" :style="{fontSize:titleSize}" :class="imgUrl?'ml-10':''">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "qmy-custom-navbar",
		props: {
			iconColor: {
				type: String,
				default: ''
			},
			imgUrl: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			userGender: {
				type: Number,
				default: 0
			},
			titleSize: {
				type: String,
				default: '30rpx'
			},
			bacColor: {
				type: String,
				default: '8'
			},
			top: {
				type: Number,
				default: 8
			},
			path: {
				type: String,
				default: ''
			},
			zIndex: {
				type: String,
				default: '2'
			}
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: {
					top: 19,
					height: 28,
					width: 77
				},
				// #endif
			};
		},
		methods: {
			GoBack() {
				// 震动
				uni.vibrateShort();
				const pages = getCurrentPages()
				if (pages && pages.length > 0) {
					const firstPage = pages[0]
					if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
						return uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						return uni.navigateBack({
							delta: 1
						})
					}
				} else {
					return uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
		}
	}
</script>

<style>
	.shu-x {
		width: 1rpx;
		height: 27rpx;
		background: #f0f0f0;
	}
</style>